<template>
    <div class="page" v-if="toggle" :style="{transform:'translateX('+translate_x+'%)'}">
        <iframe :src="src" frameborder="0" scrolling="auto"></iframe>
        <!--S返回红包-->
        <div id="back" @click.stop="close">返回{{web_name}}</div>
        <!--E返回红包-->
    </div>
</template>

<script>
    export default {
        name: "Page",
        data(){
            return {
                "translate_x": 100,   //组件translateX
                web_name:""  //网站名称
            }
        },
        props:{
            //网页链接
            src:{
                type:String
            },
            //触发显示隐藏
            toggle:{
                type:Boolean,
                default:false
            }
        },
        watch:{
            toggle(value){
                if(value){
                    setTimeout(()=>{
                        this.translate_x = 0;
                    },100);
                }
            }
        },
        created() {
            //名称
            this.$url("setting/easyFind",{
                return:["web_name"]
            })
            .then((res)=>{
                if(res.data.status === "success"){
                    this.web_name = res.data.data.web_name;
                }
            });
        },
        methods:{
            //关闭
            close(){
                this.translate_x = 100;
                setTimeout(()=>{
                    this.$emit('close');
                },100);
            }
        }
    }
</script>

<style scoped lang="less" src="./page.less"></style>